<template>
  <div class="container" :style="{ height: height }">
    <div class="title_container">
      <span class="title"></span>
      <span style="margin-left: 10px; font-size: 20px; color: #1cdbfe">
        服务工单分布</span
      >
    </div>
    <div class="pie" ref="pie" style="width: 100%; height: 280px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getServiceWorkOrder } from "@/api/dataScreen/index";
export default {
  data() {
    return {
      height: "300px",
      chartHeight: "280px",
      chart: null,
      color: [
        "#0E8BFF",
        "#1CDBFE",
        "#0DDE9C",
        "#87AF29",
        "#E4C431",
        "#87AF29",
        "#FB9A44",
        "#E54C32",
        "#E9444c",
      ],
    }
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = "320px";
  //       } else {
  //         this.height = "300px";
  //       }
  //     },
  //   },
  // },
  methods: {
    renderChart() {
      getServiceWorkOrder().then((res) => {
        const arr = [];
        const total = res.workOrderMap.total;
        for (const i in res.workOrderMap.data) {
          const obj = {
            name: res.workOrderMap.data[i].serviceItem,
            value: res.workOrderMap.data[i].serviceItemPercent,
            label: {
              color: this.color[i],
            },
            labelLine: {
              lineStyle: {
                color: this.color[i],
              },
            },
            itemStyle: {
              color: this.color[i],
            },
          };
          arr.push(obj);
        }

        this.chart = echarts.init(this.$refs.pie);
        const options = {
          legend: {
            show: true,
            left: "80%",
            // right: '7%',
            top: "20%",
            orient: "vertical",
            itemWidth: 14,
            textStyle: {
              color: "#4FA6F7",
            },
            icon: "rect",
          },
          tooltip: {
            trigger: "item",
            backgroundColor: "#040737",
            borderColor: "#0E8BFF", // 设置边框颜色，这里是绿色
            borderWidth: 2, // 设置边框宽度，这里是2像素
            textStyle: {
              // 设置文本样式
              color: "#ffffff", // 设置文本颜色
              fontSize: 16, // 设置文本字体大小
            },
            axisPointer: {
              // 禁用轴线
              type: "none",
            },
          },
          title: {
            text: `${total}单`,
            left: "35%",
            top: "49%",
            textStyle: {
              color: "#fff",
              fontSize: 15,
              fontWeight: "normal",
            },
          },
          series: [
            {
              type: "pie",
              roseType: "radius",
              left: "10px",
              top: "20px",
              // width:"400",
              center: ["40%", "50%"], //圆中心的位置，x,y轴
              radius: [35, 80], //数组第1个是空心圆的半径，第2个是内容圆的半径
              label: {
                formatter: function (params) {
                  return params.data.value + "%";
                },
                color: "#fff",
              },

              data: arr,
            },
          ],
        };
        this.chart.setOption(options);
      })
    },
  },
  mounted() {
    this.renderChart();
  },
};
</script>
<style scoped lang="scss">
.container {
  //height: 300px;
  padding: 10px 20px;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;
  .title_container {
    display: flex;
    align-items: center;
    .title {
      width: 13px;
      height: 27px;
      background: #1cdbfe;
      border-radius: 6px;
      display: inline-block;
    }
  }
}
</style>
